<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> parking 管理 </title>

    <!--
        导入 js 和 element
    -->
    <script src="/js/vue.js"></script>
    <script src="/js/axios.js"></script>
    <script src="/js/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="/js/element-ui/lib/theme-chalk/index.css">

    <style>

        .el-row > .el-button {
            margin-bottom: 15px;
        }

        .el-tag{
            text-align: center;
            width: 55px;
            display: inline-block;
        }

    </style>
</head>
<body>

<div id="app">

    <el-input
            placeholder="车位号:"
            prefix-icon="el-icon-search"
            v-model="numbers"
            style="width: 32%;margin-bottom: 15px"
    >
    </el-input>

    <el-button @click="search" type="success"> 搜索</el-button>


    <el-row>

        <el-button  @click="addParking" type="primary"> 添加</el-button>
        <el-button type="danger"> 多个删除</el-button>

    </el-row>

    <el-table
            :data="parkings"
            style="width: 100%">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>

        <el-table-column
                prop="numbers"
                label="车位号"
                width="120">
        </el-table-column>

        <el-table-column
                prop="owner.username"
                label="业主名称"
                width="120">
        </el-table-column>

        <el-table-column
                prop="owner.tel"
                label="业主电话"
                width="120">
        </el-table-column>

        <el-table-column
                prop="status"
                label="状态"
        >
            <template slot-scope="scope">
                <el-tag color="#409EFF" size="medium" type="info">{{scope.row.status == '1' ? "使用" : "未使用"}}</el-tag>
            </template>

        </el-table-column>

        <el-table-column
                fixed="right"
                label="操作"
                width="150">
            <template slot-scope="scope">
                <el-button @click="handleEdit(scope.row)" type="primary" size="small">修改</el-button>
                <el-button @click="handleDelete(scope.row)" type="danger" size="small">删除</el-button>
            </template>
        </el-table-column>


    </el-table>

    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <!--  添加车位  -->
    <el-dialog
            title="车位添加"
            :visible.sync="addDialogVisible"
            width="45%"
            @close="handlerClose">

        <el-form ref="parking" :model="parking" label-width="80px">

            <el-form-item label="车位编号">
                <el-input v-model="parking.numbers"></el-input>
            </el-form-item>

            <el-form-item label="关联户主">
                    <el-select v-model="parking.ownerId" placeholder="请选择所属楼宇">
                        <el-option
                                v-for="owner in owners"
                                :key="owner.id"
                                :label="owner.username"
                                :value="owner.id">
                        </el-option>

                </el-select>
            </el-form-item>

            <el-form-item label="备注信息">
                <el-input type="textarea" v-model="parking.remarks"></el-input>
            </el-form-item>

        </el-form>

        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addParkingData"> 添加车位 </el-button>

    </el-dialog>

    <!-- 修改车位  -->
    <el-dialog
            title="车位修改"
            :visible.sync="editDialogVisible"
            width="45%"
            @close="handlerClose">

        <el-form ref="upParking" :model="upParking" label-width="80px">

            <el-form-item label="车位编号">
                <el-input v-model="upParking.numbers"></el-input>
            </el-form-item>

            <el-form-item label="关联户主">
                <el-select v-model="upParking.ownerId" placeholder="请选择所属楼宇">
                    <el-option
                            v-for="owner in owners"
                            :key="owner.id"
                            :label="owner.username"
                            :value="owner.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="备注信息">
                <el-input type="textarea" v-model="upParking.remarks"></el-input>
            </el-form-item>

        </el-form>

        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateParkingData"> 修改车位 </el-button>

    </el-dialog>

</div>

<script>

    let app = new Vue({
        el: "#app",
        data: {
            numbers: "",
            parkings: [],
            currentPage: 1,
            pageSizes: [2, 3, 4],
            pageSize: 2,
            total: 0,
            addDialogVisible: false,
            editDialogVisible: false,
            parking:{},
            owners:[],
            upParking:{}
        },
        methods: {
            // 修改 操作
            handleEdit(row){
                this.editDialogVisible = true;
                this.upParking = JSON.parse(JSON.stringify(row));
            },
            // 修改房屋数据
            updateParkingData(){
                axios({
                    method: "PUT",
                    url: "http://localhost:8080/parking",
                    data:this.upParking
                }).then(resp => {
                    // 01 信息提示
                    if (resp.data.code == 100000){
                        this.$message({
                            message: resp.data.msg,
                            type: 'success'
                        });
                        // 02 数据刷新
                        this.findParking(this.currentPage, this.pageSize, this.numbers);
                        // 03 关闭dialog
                        this.editDialogVisible = false;
                    }
                })
            },
            handlerClose(){
                // alert("我dialog关闭了..");
                this.house = {};
            },
            // 添加房屋数据
            addParkingData(){
                axios({
                    method: "POST",
                    url: "http://localhost:8080/parking",
                    data:this.parking
                }).then(resp => {
                    // 01 信息提示
                    if (resp.data.code == 100000){
                        this.$message({
                            message: resp.data.msg,
                            type: 'success'
                        });
                        // 02 数据刷新
                        this.findParking(this.currentPage, this.pageSize, this.numbers);
                         // 03 关闭dialog
                        this.addDialogVisible = false;
                    }
                })
            },

            addParking(){
                this.addDialogVisible = true;
            },
            //条件搜索
            search() {
                this.findParking(this.currentPage, this.pageSize, this.numbers);
            },
            // 改变的 size
            handleSizeChange(val) {
                this.pageSize = val;
                this.findParking(this.currentPage, this.pageSize, this.numbers);
            },

            //触发改变的currentPage
            handleCurrentChange(val) {
                this.currentPage = val;
                this.findParking(this.currentPage, this.pageSize, this.numbers);
            },

            findParking(currentPage, pageSize, numbers) {
                axios({
                    method: "GET",
                    url: "http://localhost:8080/parking",
                    params: {
                        currentPage: currentPage,
                        pageSize: pageSize,
                        numbers: numbers
                    }
                }).then(resp => {
                    this.parkings = resp.data.data.data;
                    this.total = resp.data.data.total;
                })
            },
            findOwner(){
                axios({
                    method: "GET",
                    url: "http://localhost:8080/owner/all",
                }).then(resp => {
                    console.log(resp.data);
                    this.owners = resp.data.data;
                })
            }
        },
        created() {
            this.findParking(1, 2);
            // //查询楼宇信息
            this.findOwner();
        }
    });
</script>

</body>
</html>